<template>
  <div>
    <div>
      <div>{{hobby}}</div>
      <button @click="change" class="btn">点击我</button>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import axios from "@/utils/axios";
// import { log } from "console";

export default {
  name: "Account",
  setup() {
    let nameInfo = {
      name: "zz"
    };
    let nameObj = ref(nameInfo);
    let color = 'red'
    let hobby = ref(color)
    const state = reactive({
      user: null,
      nameForm: {
        loginName: "",
        nickName: ""
      }
    });
    onMounted(() => {});
    const submitName = () => {};
    const change = () => {
        // nameInfo.name = 'CC'
        color = 'ccc'
        console.log(color,hobby);
        // console.log(nameInfo,nameObj);
    };

    return {
      ...toRefs(state),
      nameInfo,
      nameObj,
      change,
      submitName,
      color,
      hobby
    };
  }
};
</script>

<style>
.account-container {
  margin-bottom: 20px;
}
</style>